<template>
  <div ref="currPage">

    <div style="width: 98%; margin: 10px auto;border:1px solid #EEEEEE;">
      <div style="height: 30px; line-height: 30px; text-align: left; text-indent: 10px; background: #EEEEEE;">
        <span style="display: inline-block; float: left;">店铺数据</span>
        <div style="display: inline-block; float: right; margin-right: 20px;">
          时间段:
          <el-select v-model="dateType">
            <el-option
              v-for="item in dateTypeArr"
              :key="item.key"
              :label="item.name"
              :value="item.key">
            </el-option>
          </el-select>
          &nbsp;&nbsp;&nbsp;&nbsp;
          数量/金额:
          <el-select v-model="numsType">
            <el-option
              v-for="item in numsTypeArr"
              :key="item.key"
              :label="item.name"
              :value="item.key">
            </el-option>
          </el-select>
        </div>
        <div class="c"></div>
      </div>
      <template v-for="(item,index) in echartArr">
        <my-chart :title="item.name" v-if="item.dataList.length>0" :data-list="item.dataList"/>
      </template>
    </div>

  </div>
</template>
<script>
// 引入基本模板
import EchartTools from '../Tools/EchartTools'
import MyChart from '../Common/MyChart'
import ProductSpecificationsBox from '../Dialog/ProductSpecificationsBox'
import ProductModelBox from '../Dialog/ProductModelBox'
import MyEditor from '../Common/MyEditor'
import CreateStockDialog from '../Dialog/CreateStockDialog'
import ChooseStockBox from '../Common/ChooseStockBox'
import ProductItem from '../Common/ProductItem'
import MemberItem from '../Common/MemberItem'
import OrderDialog from '../Dialog/OrderDialog'
import ExpressTableItem from '../Common/ExpressTableItem'
import AddressItem from '../Common/AddressItem'
import SupplierOrderPayDialog from '../Dialog/SupplierOrderPayDialog'

let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'Home',
  components: {
    SupplierOrderPayDialog,
    AddressItem,
    ExpressTableItem,
    OrderDialog,
    MemberItem,
    ProductItem,
    ChooseStockBox, CreateStockDialog, MyEditor, ProductModelBox, ProductSpecificationsBox, MyChart
  },
  data: function () {
    return {
      dateType:'month',
      dateTypeArr:[
        {key:'week',name:'临近7天'},
        {key:'month',name:'临近30天'},
        {key:'year',name:'临近1年'},
      ],
      numsType:'money',
      numsTypeArr:[
        {key:'money',name:'金额'},
        {key:'count',name:'数量'},
      ],
      tipNumsMap:{
        needSendOrderNums:1,
        needHandlerOrderApplyNums:1,
        unReadNums:10,
      },
      echartArr: []
    }
  },
  watch:{
    numsType:function () {
      this.showChart()
    },
    dateType:function () {
      this.getEchartData()
    },
    $route:function () {
      this.getEchartData()
      this.getTipNums()
    }
  },
  mounted: function () {
    if (this.CurrUser.IsLogin()){
      this.getEchartData()
      this.getTipNums()
    }
    // this.$refs['supplier-order-pay-dialog'].open({id:3,price:9000,orderNo:'123456789'})
    // this.$refs['choose-address-dialog'].open()
  },
  methods: {
    setEmptyEchartArr:function () {
      this.echartArr=[
        {
          name: '订单',
          configList: [{key: 'OrderPay', name: '已付款'}, {key: 'OrderComplete', name: '已完成'}, {key: 'OrderApplyComplete',name: '已退款'}],
          dataList: []
        },
        {
          name: '资金',
          configList: [{key: 'Settlement', name: '已结算'}, {key: 'WithDraw', name: '已提现'}],
          dataList: []
        },
        {
          name: '商品',
          configList: [{key: 'ProductUp', name: '上架'}, {key: 'ProductDown', name: '下架'}],
          dataList: []
        }
      ]
    },
    getTipNums:function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Home/tipNums', {}, function (data) {
        $this.tipNumsMap = data
        $this.$forceUpdate()
      })
    },
    callback: function (list) {
      // console.log('规格数据: ', list)
    },
    getEchartData: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Home/overData', {type: $this.dateType}, function (data) {
        $this.echartAllMap = data
        $this.showChart()
      })
    },
    /**
     * 显示类型: money.金额 count.数量
     */
    showChart () {
      let $this = this
      $this.setEmptyEchartArr()
      setTimeout(function () {
        $this.echartArr.forEach(function (item, index) {
          item.configList.forEach(function (_item, _index) {
            // 压入即将要渲染的数组
            var dataList=EchartTools.parseData($this.echartAllMap[_item.key])[$this.numsType];
            dataList=dataList.sort(function (a,b) {
              var tmpA=a.key.replace("年","1").replace("月","1").replace("日","1")
              var tmpB=b.key.replace("年","1").replace("月","1").replace("日","1")
              return -(tmpB-tmpA)
            })
            $this.echartArr[index].dataList.push({
              name: _item.name,
              list:dataList
            })
          })
        })
      },300)
    },
  }
}
</script>
<style scoped>
#myChart {
  min-width: 1700px;
  height: 400px;
}
</style>
